<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <title>首页</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css" media="all">
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/index_style.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu" class="hover_animation menu_open" data-mark="false">
    <span></span>
    <span></span>
    <span></span>
</div>
<div id="navgation" class="navgation navgation_close">
    <ul class="point">
        <th:block th:include="include :: headnav"/>
    </ul>
    <div class="logo"><a>MyBlog</a></div>
</div>
<div class="section" id="section1">
    <div class="fp-tablecell">
        <div class="page1">
            <div class="nav wow zoomIn" data-wow-duration="2s">
                <h1>MyBlog</h1>
                <p>剑气纵横三万里,一剑光寒十九洲</p>
                <a class="layui-btn layui-btn-normal" style="margin-top: 20px" th:href="@{/user/toArticle}">Enter
                    Blog</a>
            </div>
            <a class="next wow fadeInUp" data-wow-duration="2s" id="next"></a>
        </div>
    </div>
</div>
<div class="section" id="section2">
    <div class="fp-tablecell">
        <div class="page2">
            <div class="warp-box">
                <div class="new-article">
                    <div class="inner wow fadeInDown" data-wow-delay=".2s">
                        <h1>热门文章</h1>
                        <p>
                            很想给你写封信,告诉你这里的天气.
                            <br>昨夜的那场电影,还有我的心情.
                        </p>
                    </div>
                </div>
                <div class="layui-row">
                    <div th:each="blog,blogStat:${hotBLogs}"
                         class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp"
                         th:data-wow-delay="${blogStat.index}==0 ? '.0s':(${blogStat.index}==1?'.3s':'.6s')"
                         style="padding: 0 10px">
                        <div class="single-news">
                            <div class="news-head">
                                <img th:src="@{/file/getImg}+'/'+${blog.firstPic}">
                                <a th:href="@{/user/toReadBlog/}+${blog.id}" class="link">
                                    <i class="fa fa-link"></i>
                                </a>
                            </div>
                            <div class="news-content">
                                <h4>
                                    <a th:href="@{/user/toReadBlog/}+${blog.id}" th:text="${blog.title}">
                                        标题
                                    </a>
                                </h4>
                                <div class="date" th:text="${blog.date}">
                                    2017年2月16日
                                </div>
                                <a th:href="@{/user/toArticle}" class="btn">
                                    阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section3">
    <div class="fp-tablecell">
        <div class="page3">
            <div class="warp-box">
                <div class="warp">
                    <div class="inner">
                        <div class="links">
                            <ul>
                                <li class="wow fadeInLeft"><a href="#">关于</a></li>
                                <li class="wow fadeInRight"><a href="#">+友情链接</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section4">
    <div class="fp-tablecell">
        <div class="page4">
            <div class="warp-box">
                <div class="about">
                    <div class="inner">
                        <h1 class="wow fadeInLeft">次元使者</h1>
                        <p class="wow fadeInRight">
                            爱好游戏，动漫。闲来无事喜欢在一些不健康的场所虚度光阴，撸起代码就会废寝忘食。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer wow fadeInUp" id="contact">
    <div class="footer-top">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget about">
                        <div class="footer-logo">
                            <!--                              <h2>MyBlog</h2>-->
                            <h1 style="color: #1E9FFF">MyBlog</h1>
                        </div>
                        <p>不积跬步无以至千里，不积小流无以成江海。</p>
                        <div class="button">
                            <a href="#" class="btn layui-btn layui-btn-normal">About Me</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget">
                        <h2>相关链接</h2>
                        <ul class="social-icon">
                            <li class="active"><a th:href="@{/user/toArticle}"><i class="fa fa-book"></i>博文</a></li>
                            <li class="active"><a th:href="@{/user/toMessage}"><i class="fa fa-comments"></i>留言</a></li>
                            <li class="active">
                                <a target="_blank"
                                   href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1289596706@qq.com">
                                    <i class="fa fa-phone-square"></i>联系我</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="single-widget contact">
                        <h2>联系我</h2>
                        <ul class="list">
                            <li><i class="fa fa-map"></i>地址: 河南省开封市河南大学金明校区</li>
                            <li>
                                <a href="https://wpa.qq.com/msgrd?v=3&uin=1289596706&site=qq&menu=yes" target="_blank"
                                   title="1289596706"><i class="fa fa-qq"></i>QQ: 1289596706</a>
                            </li>
                            <li><a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1289596706@qq.com"
                                   target="_blank" title="1289596706@qq.com"><i
                                    class="fa fa-envelope"></i>邮箱：1289596706@qq.com</a></li>
                            <li id="wechartQR">
                                <i  class="fa fa-weixin"></i>微信
                            </li>
                            <li>
                                <a href="https://github.com/henu77" target="_blank"><i
                                        class="fa fa-github"></i>Github</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center">
                    <p>Copyright &copy; 2021-2021 MyBlog All Rights Reserved V.0.0.1</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<script th:src="@{/js/index.js}"></script>
<th:block th:include="include :: commonJs"/>
<th:block th:include="include :: showWeChartQR"/>
<script>
    layui.use('layer', function () {
        let layer = layui.layer;
    });
</script>
</body>
</html>